<template>
    <div id='map' style='width: 100%; height: 100%'></div>
</template>

<script setup>
import { onMounted } from 'vue'
import View from 'ol/View'
import Tailayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'


const target = 'map'

const view = new View({
    // 南京地理地质
    center: [118.796877, 32.058434],
    zoom: 10,
    projection: 'EPSG:4326'
})

const layers = [
    new Tailayer({
        source: new XYZ({
            // 高德地图
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
        })
    })
]

onMounted(() => {
    new Map({
        target: target,
        layers: layers,
        view: view
    })
})
</script>